<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .item {
            padding: 20px;
            border: 1px solid pink;
            float: left;
        }

        img {
            width: 240px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="item">
            <img src="images/01.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/02.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/03.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/04.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/05.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/06.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/07.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/08.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/09.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/10.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/11.jpg " alt="">
        </div>
        <div class="item">
            <img src="images/12.jpg " alt="">
        </div>
    </div>
    <script>
        var url = {
            dataUrl: [{
                src: "01.jpg"
            }, {
                src: "02.jpg"
            }, {
                src: "03.jpg"
            }, {
                src: "04.jpg"
            }, {
                src: "05.jpg"
            }, {
                src: "06.jpg"
            }, {
                src: "07.jpg"
            }, {
                src: "08.jpg"
            }, {
                src: "09.jpg"
            }, {
                src: "10.jpg"
            }, {
                src: "11.jpg"
            }, {
                src: "12.jpg"
            }]
        }

        function placeImg() {
            var ww = $(document).width();
            var itemW = $('.item').outerWidth();
            var num = Math.floor(ww / itemW);
            var arrH = [];
            console.log(ww, itemW, num)
            $('.item').each((index, item) => {
                if (index < num) {
                    var itemH = $(item).outerHeight();
                    // console.log(itemH)
                    arrH.push(itemH);
                } else {
                    var minH = Math.min(...arrH);
                    var minIndex = arrH.indexOf(minH);
                    var setLeft = $('.item').eq(minIndex).offset().left;
                    // console.log(minH,minIndex,setLeft)
                    $(".item").eq(index).css({
                        position: 'absolute',
                        top: minH,
                        left: setLeft,
                    })
                    arrH[minIndex] = minH + $(item).outerHeight();
                }
            })
        }

        function onReachBottom() {
            var documentH = $(document).height();
            var windowH = $(window).height();
            var scrollTop = Math.ceil($(document).scrollTop());
            // console.log(documentH,windowH,scrollTop)
            return (documentH == windowH + scrollTop) ? true : false;
        }
        window.onload = function () {
            placeImg()
            $(window).scroll(
                function () {
                    if (onReachBottom()) {
                        url.dataUrl.forEach(item => {
                            var list = `<div class="item"><img src="images/${item.src} " alt=""></div>`
                            $('.content').append(list)
                        })
                    }
                    placeImg()
                }
                
            )

        }
    </script>
</body>

</html>